

<template>
  <h2 class="block-title-area" :class="borderStyle">
    <span class="text">{{ title || '标题' }}</span>
    <slot></slot>
  </h2>
</template>

<script>
export default {
  name: "BlockTitle",
  props: ['title', 'borderStyle']
}
</script>

<style lang="scss">
  .block-title-area{
    color: #436bd9;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    padding: 16px 15px;


    &.bottom{
      border-bottom: 1px solid #ccc;
    }

    &::before{
      content: "";
      width: 3px;
      background: #436bd9;
      height: 14px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .text {
      margin-right: 20px;
    }
  }
</style>